<template>
    <view class="uni-collapse">
        <slot />
    </view>
</template>
<script>
/**
 * Collapse 折叠面板
 * @description 展示可以折叠 / 展开的内容区域
 * @tutorial https://ext.dcloud.net.cn/plugin?id=23
 * @property {String|Array} value 当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array)
 * @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
 * @event {Function} change 切换面板时触发，如果是手风琴模式，返回类型为string，否则为array
 */
export default {
    name: "UniCollapse",
    props: {
        value: {
            type: [String, Array],
            default: ""
        },
        modelValue: {
            type: [String, Array],
            default: ""
        },
        accordion: {
            // 是否开启手风琴效果
            type: [Boolean, String],
            default: false
        }
    },
    emits: ["change", "activeItem", "input", "update:modelValue"],
    data() {
        return {};
    },
    computed: {
        // TODO 兼容 vue2 和 vue3
        dataValue() {
            let value =
                (typeof this.value === "string" && this.value === "") ||
                (Array.isArray(this.value) && this.value.length === 0);
            let modelValue =
                (typeof this.modelValue === "string" && this.modelValue === "") ||
                (Array.isArray(this.modelValue) && this.modelValue.length === 0);
            if (value) {
                return this.modelValue;
            }
            if (modelValue) {
                return this.value;
            }

            return this.value;
        }
    },
    watch: {
        dataValue(val) {
            this.setOpen(val);
        }
    },
    created() {
        this.childrens = [];
        this.names = [];
    },
    mounted() {
        this.$nextTick(() => {
            this.setOpen(this.dataValue);
        });
    },
    methods: {
        setOpen(val) {
            let str = typeof val === "string";
            let arr = Array.isArray(val);
            this.childrens.forEach((vm, index) => {
                if (str) {
                    if (val === vm.nameSync) {
                        if (!this.accordion) {
                            console.warn("accordion 属性为 false ,v-model 类型应该为 array");
                            return;
                        }
                        vm.isOpen = true;
                    }
                }
                if (arr) {
                    val.forEach((v) => {
                        if (v === vm.nameSync) {
                            if (this.accordion) {
                                console.warn("accordion 属性为 true ,v-model 类型应该为 string");
                                return;
                            }
                            vm.isOpen = true;
                        }
                    });
                }
            });
            this.emit(val);
        },
        setAccordion(self) {
            if (!this.accordion) return;
            this.childrens.forEach((vm, index) => {
                if (self !== vm) {
                    vm.isOpen = false;
                }
            });
        },
        resize() {
            this.childrens.forEach((vm, index) => {
                // #ifndef APP-NVUE
                vm.getCollapseHeight();
                // #endif
                // #ifdef APP-NVUE
                vm.getNvueHwight();
                // #endif
            });
        },
        onChange(isOpen, self) {
            let activeItem = [];

            if (this.accordion) {
                activeItem = isOpen ? self.nameSync : "";
            } else {
                this.childrens.forEach((vm, index) => {
                    if (vm.isOpen) {
                        activeItem.push(vm.nameSync);
                    }
                });
            }
            this.$emit("change", activeItem);
            this.emit(activeItem);
        },
        emit(val) {
            this.$emit("input", val);
            this.$emit("update:modelValue", val);
        }
    }
};
</script>
<style lang="scss">
.uni-collapse {
    /* #ifndef APP-NVUE */
    width: 100%;
    display: flex;
    /* #endif */
    /* #ifdef APP-NVUE */
    flex: 1;
    /* #endif */
    flex-direction: column;
    background-color: #fff;
}
</style>
